<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'

const count = ref([])
const load = () => {
  axios.get('/api/user/getGz',
    {
      headers: {
        Authorization: localStorage.getItem('token')
      }
    }).then((response) => {
    count.value = response.data.data
  })
}

load()

function act(name: string) {
  window.open('/pn/?pa=' + encodeURIComponent(name), '_blank')
}

function sc(data: string, n: number) {
  axios.get('/api/sc/removeSc', {
    params: {
      name: data
    },
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then((response) => {
    let colors
    if (response.data.code === 200) {
      //6--迭代方法
      //5-splice()方法
      colors = count.value
      colors.splice(n, 1)

    }
  })
}
</script>

<template>
  <div>
    <div class="title">收藏
      <el-divider border-style="dashed" />
    </div>
    <div class="list">
      <div class="title_1">
        <div>电影名称</div>
        <div>海报</div>
        <div>编辑</div>
      </div>
      <div class="form">
        <div class="title_11" v-for="(i,index) in count" :key="index">
          <div class="title_2" @click="act(i.name)">{{ i.name }}</div>
          <div class="title_img">
            <img :src="i.url" alt="" width="100%" height="100%">
          </div>
          <div class="title_2">
            <div @click="sc(i.name,index)" style="margin-left: 45px;">
              <el-button type="info" round>取消收藏</el-button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>

.title_2 {
  padding-top: 65px;
  cursor: pointer;
}

.title_img {
  height: 100%;
  padding: 20px 200px 20px 0;
}

.title_1 {
  width: 100%;
  height: 40px;
  display: flex;
}

.title_11 {
  width: 100%;
  height: 150px;
  margin: 5px 5px 5px 0;
  display: flex;

}

.form {
  overflow-y: auto;
  white-space: nowrap;
  height: 65vh;

}

.title_1 div {
  width: 30%;

}

.title_11 div {
  width: 27%;
}

.title {
  font-size: 30px;
  margin-top: 40px;
}

.infinite-list {
  height: 70vh;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: #3434341a;
  margin: 9px;
  color: #ffffff;
  border-radius: 10px;
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 2px;
  background-color: rgba(245, 245, 245, 0);
}

/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
  border-radius: 10px;
  background-color: rgba(245, 245, 245, 0);
}

/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 6px rgba(159, 159, 159, 0.3);
  background-color: #818181;
}

</style>